<template>
  <a-card :bordered="false" class="card-area">
    <!-- 查询区域 11111-->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :label-col="labelCol" >
        <a-row :gutter="24">

          <a-col :md="8" :sm="8">
            <a-form-item label="选择时间">
              <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="queryParam.beginTime"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.endTime"></j-date>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
           <a-col :md="6" :sm="24">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
           </a-col>
        </span>
        </a-row>
      </a-form>
    </div>
    <a-row>
      <div class="d-a-c lh30 ww100 pt16">
        <div class="pt30 tc" style="width: 80px;">
          <p class="gray9">今日</p>
          <p class="gray9">昨日</p>
        </div>
        <div class="flex-1 tc">
          <p>成交额</p>
          <p class="f20 fb gray3">{{today.incomeAmount}}</p>
          <p class="gray">{{yesterday.incomeAmount}}</p>
        </div>
        <div class="flex-1 tc">
          <p>客单价</p>
          <p class="f20 fb gray3">0.00</p>
          <p class="gray">0.00</p>
        </div>
        <div class="flex-1 tc">
          <p>付款订单</p>
          <p class="f20 fb gray3">{{today.qty}}</p>
          <p class="gray">{{yesterday.qty}}</p>
        </div>
        <div class="flex-1 tc">
          <p>付款人数</p>
          <p class="f20 fb gray3">{{today.qty}}</p>
          <p class="gray">{{yesterday.qty}}</p>
        </div>
      </div>
    </a-row>

    <!-- 操作按钮区域 -->
    <a-divider orientation="left" style="margin-top: 50px">
      交易统计
    </a-divider>

    <!-- table区域-begin -->
    <div>

      <LineChartMultid title="订单数" :dataSource="barData" :fields="fields"/>
    </div>

    <a-row>
      <div class="d-a-c lh30 ww100 pt16">
        <div class="pt30 tc" style="width: 80px;">
          <p class="gray9">今日</p>
          <p class="gray9">昨日</p>
        </div>
        <div class="flex-1 tc">
          <p>在售商品</p>
          <p class="f20 fb gray3">{{goodsToday.totalCount}}</p>
          <p class="gray">{{goodsYesterday.totalCount}}</p>
        </div>
        <div class="flex-1 tc">
          <p>已付款商品</p>
          <p class="f20 fb gray3">{{goodsToday.saleQty}}</p>
          <p class="gray">{{goodsYesterday.saleQty}}</p>
        </div>
      </div>
    </a-row>

    <!-- 操作按钮区域 -->
    <a-divider orientation="left" style="margin-top: 50px">
      商品统计
    </a-divider>

    <!-- table区域-begin -->
    <div>
      <LineChartMultid title="销售额趋势" :dataSource="goodsData" :fields="goodsFields"  style="width: 95%"/>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { putAction, getAction, postAction } from '@/api/manage'
import { frozenBatch } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import LineChartMultid from '@/components/chart/LineChartMultid'
import JDate from '@/components/jeecg/JDate'
export default {
  name: 'ord_store_memberList',
  mixins: [JeecgListMixin],
  components: {
    LineChartMultid,
    JeecgListMixin,
    JDate
  },
  data() {
    return {
      description: '餐饮会员信息管理页面',
      labelCol: { style: { width: '110px' } },
      disableMixinCreated:true,//JeecgListMixin created 不执行
      queryParam:{
        beginTime:"",
        endTime:"",
      },
      fields:["成交额","成交量"],
      barData:[],
      goodsFields:["商品件数"],
      goodsData:[],
      url: {
        list: '/store/member/list',
        finance: '/store/finance/settled',
        transaction:'/store/report/transaction',
        goodsSale:'/store/report/goods/sale',
        goodsSaleTransaction:'/store/report/goods/sale/transaction',
      },
      today:{
        incomeAmount:0,
        qty:0,
        refundAmount:0,
        amount:0,
      },
      yesterday:{
        incomeAmount:0,
        qty:0,
        refundAmount:0,
        amount:0,
      },
      goodsToday:{
        totalCount:0,
        saleQty:0
      },
      goodsYesterday:{
        totalCount:0,
        saleQty:0
      },
    }
  },
  created() {
    const that = this
    let ymd = this.getDate2Ymd();
    that.queryParam.beginTime = ymd;
    that.queryParam.endTime = ymd;
    that.searchQuery();
  },
  methods: {
    searchQuery(){
      const that = this
      var params1={timeType:1}
      getAction(this.url.finance,params1).then((res) => {
        if (res.success) {
          that.today = res.result
        }
      })
      var params2={timeType:2}
      getAction(this.url.finance,params2).then((res) => {
        if (res.success) {
          that.yesterday = res.result
        }
      })
      var params3={"beginTime":that.queryParam.beginTime,"endTime":that.queryParam.endTime}
      getAction(this.url.transaction,params3).then((res) => {
        if (res.success) {
          res.result.forEach((item,index)=>{
            var data={ "type": item.date, "成交额": item.totalAmount, "成交量":item.qty};
             that.barData.push(data);
          })
        }
      })

      var params4={timeType:1}
      getAction(this.url.goodsSale,params4).then((res) => {
        if (res.success) {
          that.goodsToday=res.result;
        }
      })
      var params5={timeType:2}
      getAction(this.url.goodsSale,params5).then((res) => {
        if (res.success) {
          that.goodsYesterday=res.result;
        }
      })
      var params6={"beginTime":that.queryParam.beginTime,"endTime":that.queryParam.endTime}
      getAction(this.url.goodsSaleTransaction,params6).then((res) => {
        if (res.success) {
          res.result.forEach((item,index)=>{
            var data={ "type": item.date, "商品件数": item.saleQty};
            that.goodsData.push(data);
          })
        }
      })
    },
  }
}
</script>
<style scoped>
.ww100 {
  width: 100%;
}
.d-a-c {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.pt30 {
  padding-top: 30px;
}
.lh30 {
  line-height: 30px;
}
.pt16 {
  padding-top: 16px;
}
.flex-1 {
  flex: 1;
}
.tc {
  text-align: center;
}
.fb {
  font-weight: 700;
}
.f20 {
  font-size: 20px;
}
.gray3 {
  color: #333;
}
.gray {
  color: #ccc;
  width: auto;
}
</style>
